<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

<button class="btn1">按钮1</button>
<button class="btn2">按钮2</button>

<script>
// 触发事件
// 通常添加事件后，事件触发后执行对应的处理函数
// 有时候需要 主动触发事件（不点击按钮，也能执行事件处理函数）


var btn1 = document.querySelector('.btn1');
var btn2 = document.querySelector('.btn2');

// DOM 0级事件模型
btn1.onclick = function (){// 事件处理函数
    console.log( 'btn1被点击。。。' )
}
btn1.onclick();// 触发事件


// DOM 2级事件模型
function fn2(){// 事件处理函数
    console.log( 'btn2被点击。。。' )
}
btn2.addEventListener('click',fn2);
// 创建一个事件对象
var ev = new Event('click');
btn2.dispatchEvent(ev);// 触发事件

// fn2();// 直接调用事件处理函数

// 触发事件时执行fn2和直接调用fn2有什么区别？
// 触发事件时执行fn2，btn2被点击过
// 直接调用fn2，btn2没被点击过

</script>
</body>
</html>